<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue';
import SWorker from '@/worker?worker';

const pong = ref<string | undefined>(undefined);
const mode = ref<string | undefined>(undefined);
const worker = new SWorker();

const runWorker = async () => {
  worker.postMessage('ping');
};
const resetMessage = async () => {
  worker.postMessage('clear');
};
const messageFromWorker = async ({
  data: { msg, mode: useMode },
}: {
  data: { msg?: string; mode?: string };
}) => {
  pong.value = msg;
  mode.value = useMode;
};

onBeforeMount(() => {
  worker.addEventListener('message', messageFromWorker);
});
</script>
<template>
  <p class="sw-btns">
    <el-button @click="runWorker">Ping Web Worker</el-button>
    &#160;&#160;
    <el-button @click="resetMessage">Reset Message</el-button>
  </p>

  <p v-if="pong" class="sw-msg">
    Response from web worker:
    <span>
      Message: <strong class="font-bold">{{ pong }}</strong>
    </span>
    <br />
    <span>
      Using ENV mode: <strong class="font-bold">{{ mode }}</strong></span
    >
  </p>
</template>
<style lang="scss" scoped></style>
